
import './index.less';
import { useSelector } from 'react-redux';

const getDevice = state => state.layoutHead.device;
const getScale = state => state.layoutHead.scale;

export default function Simulator(props) {
    const { isPreview = false } = props;

    const device = useSelector(getDevice);
    const scale = useSelector(getScale);

    return <div className="simulator" style={{transform: `scale(${scale})`}}>
        <div className="simulator-wrapper">
            {
                !isPreview && <>
                    <div className="simulator-bg" />
                    <div className='simulator-head'>
                        <div className='simulator-head-left'>{device.name} 5G</div>
                        <div className='simulator-head-middle'>10:29</div>
                        <div className='simulator-head-right'>🔋：100%</div>
                    </div>
                </>
            }
            <div className={`simulator-container ${isPreview && 'preview'}`} style={{ width: device.width, height: device.height}}>{props.children}</div>
        </div>
    </div>
}